<script setup lang="ts">
	import { useAuthStore } from '@/state/modules/auth';
	import { Toast } from '@/utils/uniapi/prompt';
	import { login } from '@/services/api/auth';
	import Iconify from '@/components/Iconify/index.vue';
	import { omit } from 'lodash-es';
	import { useRequest } from 'alova';

	const pageQuery = ref<Record<string, any> | undefined>(undefined);
	const checked = ref<boolean>(false);
	const router = useRouter();
	const loginForm = reactive({
		username: '',
		password: '',
		tel: '',
		code: '',
		loginType: 1
	});
	const authStore = useAuthStore();

	const { send: sendLogin } = useRequest(login, { immediate: false });
	const handleLogin = (e : any) => {
		if (!loginForm.username) {
			Toast('请输入手机号', { duration: 1500 });
			return;
		}
		if (!loginForm.password) {
			Toast('请输入密码', { duration: 1500 });
			return;
		}
		if (!checked.value) {
			Toast('请阅读并同意协议', { duration: 1500 });
			return;
		}
		sendLogin(loginForm).then((res) => {
			Toast('登录成功', { duration: 1500 });
			authStore.setToken(res.token);
			setTimeout(() => {
				if (unref(pageQuery)?.redirect) {
					// 如果有存在redirect(重定向)参数，登录成功后直接跳转
					const params = omit(unref(pageQuery), ['redirect', 'tabBar']);
					if (unref(pageQuery)?.tabBar) {
						// 这里replace方法无法跳转tabbar页面故改为replaceAll
						router.replaceAll({ name: unref(pageQuery).redirect, params });
					} else {
						router.replace({ name: unref(pageQuery).redirect, params });
					}
				} else {
					// 不存在则返回上一页
					router.back();
				}
			}, 1500);
		});
	};

	const checkXieyi = () => {
		checked.value = !checked.value;
	}

	onLoad((query) => {
		pageQuery.value = query;
	});
</script>

<template>
	<view class="login-container">
		<view class="logo-content _u_align-center _u_justify-center _u_flex">
			<image style="width: 100rpx;height: 100rpx;" src="/static/logo.png" mode="widthFix"></image>
			<view class="title">
				<text>欢迎登录伯乐易面</text>
				<text class="_u_text-sm _u_text-gray">请使用接受面试通知的手机号登录</text>
			</view>
		</view>
		<view class="login-form-content">
			<view class="input-item">
				<Iconify icon="i-clarity-mobile-line" class="_u_ml-2" />
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
			</view>
			<view class="input-item">
				<Iconify icon="i-solar-lock-password-linear" class="_u_ml-2" />
					<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn">登录</button>
			</view>
			<view class="xieyi _u_m-3 _u_text-sm">
				<checkbox @click="checkXieyi" :checked="checked" style="transform:scale(0.7)" />
				<text class="text-grey">登录即代表同意</text>
				<text class="text-blue">《用户协议》</text>
				<text class="text-blue">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
				display: flex;
				flex-direction: column;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
				background-color: #007aff;
				color: #fff;
				border-radius: 20px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				margin-top: 20px;
				font-size: 14px;
				text-align: center;

				.text-grey {
					color: #888;
				}

				.text-blue {
					color: #007aff;
				}
			}

		}
	}
</style>